<template>
<view class="container">
	<view class="avatar">
	    <image :src="avatar"></image>
	</view>
	<view class="remark"><text class="red">*</text>号为必填项</view>
	<view class="view_input1">
	    <view class="view_input_title2">真实姓名:</view>
		<input class="view_input_input1" type="text"
		@input="bindInput" data-name="realname" :value="form.realname"
		placeholder-class="placeholderClass" placeholder="请输入姓名"/>
		<text class="red">*</text>
	</view>
	<view class="view_input1">
	    <view class="view_input_title2">出生日期:</view>
		<picker mode="date" class="view_input_input1" 
		:value="form.birthDay" data-name="birthDay"
		@change="bindInput">
		    {{form.birthDay ? form.birthDay : '请选择'}}
		</picker>
		<text class="red">*</text>
	</view>
	
	<view class="view_input1">
	    <view class="view_input_title2">性&nbsp;&nbsp;&nbsp;&nbsp;别:</view>
		<radio-group @change="bindInput" class="view_input_radio1" data-name="sex">
			<label>
				<radio value="男" :checked="form.sex == '男'"/>
				<view>男</view>
			</label>
			<label style="margin-left: 40rpx;">
				<radio value="女" :checked="form.sex == '女'"/>
				<view>女</view>
			</label>
		</radio-group>
		<text class="red">*</text>
	</view>
	
	<view class="view_input1">
	    <view class="view_input_title2">学&nbsp;&nbsp;&nbsp;&nbsp;历:</view>
		<picker @change="bindEdu" :value="educationIndex" :range="education"
		class="view_input_input1">
			<view>{{education[educationIndex]}}</view>
		</picker>
		<text class="red">*</text>
	</view>

	<view class="view_input1">
	    <view class="view_input_title2">工作状态:</view>
		<radio-group @change="bindInput" class="view_input_radio1" data-name="workType">
			<label>
				<radio value="在职" :checked="form.workType == '在职'"/>
				<view>在职</view>
			</label>
			<label style="margin-left: 40rpx;">
				<radio value="离职" :checked="form.workType == '离职'"/>
				<view>离职</view>
			</label>
		</radio-group>
		<text class="red">*</text>
	</view>
	
	<view class="view_input1">
	    <view class="view_input_title2">工作年限:</view>
		<picker @change="bindTime" :value="workTimeIndex" :range="workTime"
		class="view_input_input1">
			<view>{{form.workTime ? form.workTime : '请选择'}}</view>
		</picker>
		<text class="red">*</text>
	</view>
	
	<view class="view_input1">
	    <view class="view_input_title2">期望薪资:</view>
		<input class="view_input_input1" type="number"
		@input="bindInput" :value="form.money" data-name="money"
		placeholder-class="placeholderClass" placeholder="请输入薪资"/>
		<text class="red">*</text>
	</view>
	
	<view class="view_input1" style="align-items: center;">
	    <view class="view_input_title2">工作城市:</view>
		<input class="view_input_input1" type="text" style="width:50%;" @click="jump('city')"
		:value="form.city ? form.city : '请选择'" disabled/>
		<image @click="jump('city')" style="width:35rpx;height:35rpx;" src="/static/img/right.png"></image>
	</view>
	
	<view class="view_input1" style="align-items: center;">
	    <view class="view_input_title2">工作岗位:</view>
		<input class="view_input_input1" type="text" style="width:50%;" @click="jump('job')"
		:value="form.post ? form.post : '请选择'" disabled/>
		<image @click="jump('job')" style="width:35rpx;height:35rpx;" src="/static/img/right.png"></image>
	</view>
	
	<view class="view_input1" style="align-items: center;">
	    <view class="view_input_title2">培训专业:</view>
		<input class="view_input_input1" type="text" style="width:50%;" @click="jump('bus')"
		:value="form.business ? form.business : '请选择'" disabled/>
		<image @click="jump('bus')" style="width:35rpx;height:35rpx;" src="/static/img/right.png"></image>
	</view>
	
	<view class="view_input1" style="align-items: center;">
	    <view class="view_input_title2">培训经历:</view>
		<input class="view_input_input1" type="text" style="width:50%;" @click="jump('study')"
		:value="form.studyList ? form.studyList : '请选择'" disabled/>
		<image @click="jump('study')" style="width:35rpx;height:35rpx;" src="/static/img/right.png"></image>
	</view>
	

	
	<view class="view_else">
		<view class="view_input_title2">工作经历:</view>
	</view>
	<view class="view_textarea">
		<textarea auto-height maxlength="-1" placeholder="工作经历"
		@input="bindInput" data-name="workList" :value="form.workList"/>
	</view>
	
	<view class="view_else">
		<view class="view_input_title2">个人特长:</view>
	</view>
	<view class="view_textarea">
		<textarea auto-height maxlength="-1" placeholder="个人特长" 
		@input="bindInput" data-name="advantage" :value="form.advantage"/>
	</view>
	
	
	<view class="view_else">
		<view class="view_input_title2">上传头像:</view>
	</view>
	<view class="view_img">
		<image class="uploadImg" v-if="form.realPic" @click="upLoad" :src="imgUrl + form.realPic"></image>
		<image class="uploadImg" v-else @click="upLoad" :src="pubImg"></image>
	</view>
	
	<view class="ruleclass">
	  <checkbox-group  @change="bindRule">
	    <label>
	      <checkbox value="同意" color="#FFA200"/>
		  <text>我已经阅读并接受</text>
		  <text class="rule-text" @click="jumpRule">《会员规则协议》</text>
	    </label>
	  </checkbox-group>
	  <view class="jumpRule" @click="jumpRule">点击查看会员协议</view>
	</view>
	<view style="height:120rpx;"></view>
	<personalRule v-if="ruleShow" @func="ruleBack"></personalRule>
	<button v-if="submittrue"  @click="addInfo" class="buttonClass">提交</button>
</view>
</template>

<script>
import request from '@/util/request.js'
import personalRule from "@/components/personalRule.vue"
export default {
	data() {
		return {
			imgUrl:this.url,
			pubImg:'/static/img/pub.png',
			avatar:uni.getStorageSync('avatarUrl'),
			form:{
				city:'',
				post:'',
				realPic:'',
				business:'',
				workList:'',
				birthDay:''
			},
			educationIndex:0,
			education:['高中以下','中专','大专','本科','硕士以上'],
			workTime: ['无', '1年', '2年', '3年','4年','5年以上'],
			workTimeIndex:0,
			userTrue:false,
			ruleShow:false,
			submittrue:true
		}
	},
	components:{personalRule},
	onShow:function(){
		//console.log(uni.getStorageSync('uid'))
		if(uni.getStorageSync('role') !== 1){
			uni.switchTab({
				url:'/pages/index/index'
			});
		}
		//uni.setStorageSync('pForm',{})
		if(uni.getStorageSync('pForm')){
			this.form = uni.getStorageSync('pForm')
		}
	},
	methods: {
		bindInput:function(e){
			let name = e.currentTarget.dataset.name
			this.form[name] = e.detail.value
			uni.setStorageSync('pForm',this.form)
			this.$forceUpdate();
		},
		bindEdu:function(e){
			this.educationIndex = e.detail.value
			this.form.education = this.education[e.detail.value]
			uni.setStorageSync('pForm',this.form)
		},
		bindTime:function(e){
			this.workTimeIndex = e.detail.value
			this.form.workTime = this.workTime[e.detail.value]
			uni.setStorageSync('pForm',this.form)
		},
		jump:function(key){
			if(key == 'city'){
				var url = '/pages/city/index'
			}
			if(key == 'job'){
				var url = '/pages/login/post/index?post='+this.form.post
			}
			if(key == 'bus'){
				var url = '/pages/user/info/business?key='+this.form.business
			}
			if(key == 'study'){
				var url = '/pages/user/info/study?key='+this.form.studyList
			}
			uni.navigateTo({
				url:url
			});
		},
		addInfo:function(){
			if(!this.userTrue){
				uni.showToast({
					title: '请同意用户协议!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			this.form.uid = uni.getStorageSync('uid')
			var array = {
				'realname':'真实姓名必填',
				'sex':'性别必选',
				'workType':'工作状态必填',
				'post':'期望工作岗位必填',
				'money':'期望工作薪资',
				'business':'培训专业必选',
				'city':'期望工作城市必选',
				'studyList':'培训经历必选',
				'birthDay':'选择出生日期',
				'education':'学历必填',
				'workTime':'工作时间必填'
			}
			for(var x in array){
			    if(!this.form[x]){
			        uni.showToast({
			        	title:array[x],
			        	icon: "none", 
			        	position:'bottom',
			        });
			        return;
			    }
			}
			this.submittrue = false
			//调接口 提交
			var that = this
			request({
				url: 'user/add',
				method: 'post',
				data:this.form,
				success: (res) => {
					if(res.data.code == 1){
						uni.setStorageSync('role',2)
						//注册完成  清楚缓存
						uni.removeStorageSync('pForm')
						if(res.data.data.status == 2){
							//被拒绝
							var message = '申请已拒绝,如有疑问请联系客服!!'
						}else{
							var message = '自动审核已通过!!'
						}
					}else{
						var message = res.data.msg
					}
					uni.showToast({
						title:message,
						icon: 'none',
						duration: 2000,
						success() {
							setTimeout(function() {
								uni.switchTab({
									url:'/pages/index/index'
								});
							}, 2000);
						}
					})
				}
			})
		},
		upLoad:function(){
			var token = 'tymy';
			var that = this
			uni.chooseImage({
				count: 1,
				sizeType:['copressed'],
				success(res){
					uni.showLoading({
					    title: '上传中'
					});
					//因为有一张图片， 输出下标[0]， 直接输出地址
					var imgFiles = res.tempFilePaths[0]
					var uper = uni.uploadFile({
						// 需要上传的地址
						url:that.imgUrl+'/api/app/upload',
						// filePath  需要上传的文件
						filePath: imgFiles,
						name:'img',
						header: {
						    // "Content-Type": "multipart/form-data",
						    // 'accept': 'application/json',  //若有token，此处换上你的token，没有的话省略
							'Authorization' : 'Bearer' + token
						},
						formData:{
							//name:'img'
						},
						success(res1) {
							uni.hideLoading();
							//console.log('上传结果',res1)
							// return;
							// 显示上传信息
							that.form.realPic = res1.data
							uni.setStorageSync('pForm',that.form)
							that.$forceUpdate();
							//console.log('1244',that.form)
						}
					});
				}
			})
		},
		bindRule:function(e){
			if (e.detail.value.length !== 0) {
				this.userTrue = true
			}else{
				this.userTrue = false
			}
		},
		jumpRule:function(){
			this.ruleShow = true
		},
		ruleBack:function(data){
			this.ruleShow = data
		}
	}
}
</script>
<style>
.avatar{
	background: #ff861a;
	width:100%;
	height:100px;
	display: flex;
	justify-content:center;
}
.avatar image{
	width:80px;height:80px;
	border-radius: 50%;margin-top:10px;
}
.red{color:red;}
.remark{
	width:100%;
	display: flex;
    justify-content: center;
	height:50rpx;
	line-height: 50rpx;
	font-size:14px;
}
.view_input_radio1{
	display: flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
	width:65%;
}
.view_input_radio1 label{
	display: flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
}
.view_else{
	width:100%;
	display: flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
}
.view_img{
	padding:20rpx 20rpx 20rpx 30rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.uploadImg{
	width:200rpx;
	height:180rpx;
	border:1px dashed #CCCCCC;
	margin-right:15rpx;
}
.view_textarea{
	width:100%;
	padding:15rpx 15rpx 15rpx 15rpx;
}
.view_textarea textarea {
	width:93%;
	border:1px dashed #CCCCCC;
	min-height:200rpx;
	padding:10rpx 10rpx 10rpx 10rpx;
}
.ruleclass{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ruleclass checkbox-group{
	width:100%;
	text-align: center;
	height:50rpx;
	line-height: 50rpx;
}
.rule-text{
	color:#FFA200;
}
.jumpRule{
	color:#FFA200;
	height:50rpx;
	line-height: 50rpx;
	text-align: center;
}
</style>